<template>
  <div style="width: 100%; height: 100%">
    <link rel="stylesheet" href="./reset.css" />
    <Layout class="layout">
      <Header>
        <div class="logo" />
        <Menu
          theme="dark"
          mode="horizontal"
          v-model:selectedKeys="selectedKeys"
          :style="{ lineHeight: '30px' }"
        >
          <MenuItem key="1">代码生成器</MenuItem>
          <MenuItem key="2">代码块</MenuItem>
          <MenuItem key="3">nav 3</MenuItem>
        </Menu>
      </Header>
      <Content style="padding: 0 20px">
        <div
          :style="{ background: '#fff', padding: '24px', minHeight: '280px' }"
        >
          <AutoCode v-if="selectedKeys[0] == '1'" />
          <BlockCode v-if="selectedKeys[0] == '2'" />
        </div>
      </Content>
      <Footer style="text-align: center">
        AutoCode ©2025 1214806257@qq.com
      </Footer>
    </Layout>
  </div>
</template>
<script setup lang="ts">
import AutoCode from "./components/AutoCode.vue";
import BlockCode from "./components/BlockCode.vue";
import { Layout, Menu, MenuItem } from "ant-design-vue";

import { ref, watch, onMounted } from "vue";
const { Header, Content, Footer } = Layout;

const selectedKeys = ref(["1"]);

onMounted(() => {});
</script>
<style scoped>
.layout {
  width: 100%;
  height: 100%;
}
.site-layout-content {
  min-height: 280px;
  padding: 24px;
  background: #fff;
}
#components-layout-demo-top .logo {
  float: left;
  width: 120px;
  height: 31px;
  margin: 16px 24px 16px 0;
  background: rgba(255, 255, 255, 0.3);
}
.ant-row-rtl #components-layout-demo-top .logo {
  float: right;
  margin: 16px 0 16px 24px;
}
.ant-layout .ant-layout-header {
  height: 30px;
  padding-inline: 10px;
  color: rgba(0, 0, 0, 0.88);
  line-height: 30px;
  background: #001529;
}
[data-theme="dark"] .site-layout-content {
  background: #141414;
}
</style>
